<template>
	<view>

		<view class="box">
			<view class="item">
				<view class="xinghao">
					*
				</view>
				<view class="item-left flex-be">
					姓名:
				</view>
				<input type="text" v-model="name" placeholder="输入姓名" />
			</view>
			<view class="item">
				<view class="xinghao">
					*
				</view>
				<view class="item-left">
					手机号:
				</view>
				<input type="number" v-model="phone" maxlength="11" placeholder="输入联系电话" />
			</view>
			<view class="item" @tap="openPicker">
				<view class="xinghao">
					*
				</view>
				<view class="item-left">
					所在地区：
				</view>
				<view class="treeBox" v-if="areaName==''">
					<picker class="pker" @change="bindPickerChange" :value="index" :range="tree" range-key="name">
						{{tree[index].name||'请选择地区'}}
					</picker>
					<picker class="pker" @change="bindPickerChange2" :value="index2" :range="shilist" range-key="name">
						{{shilist[index2].name ||''}}
					</picker>
					<picker class="pker" @change="bindPickerChange3" :value="index3" :range="xianlist" range-key="name">
						{{xianlist[index3].name ||''}}
					</picker>
				</view>
				<view class="treeBox" v-if="areaName!=''">
					<input @click="cknull" type="text" disabled="true" :value="areaName" placeholder="请选择省市区" />
				</view>
				<!-- <input type="text" disabled="true" :value="region" placeholder="请选择省市区" /> -->
			</view>

			<view class="item">
				<view class="xinghao">
					*
				</view>
				<view class="item-left">
					详细地址：
				</view>
				<input type="text" v-model="detailAddress" placeholder="例：xx街xx楼xx号" />
			</view>
			<view class=""
				style="display: flex;align-items: center;padding: 24rpx 65rpx;justify-content: space-between;">
				<view class="" style="margin-right: 40rpx;">
					是否设置为默认收货地址
				</view>
				<switch @change="switch2Change" :checked="moren2" color="#302C29" />

			</view>
		</view>
		<view class="queding" @click="adddizhi">
			保存地址
		</view>
	</view>
</template>

<script>
	import lotusAddress from "@/components/Winglau14-lotusAddress/Winglau14-lotusAddress.vue";

	export default {
		data() {
			return {
				index: -1,
				index2: 0,
				index3: 0,
				id: '',
				moren: '1',
				moren2: false,
				phone: '',
				name: '',
				detailAddress: '',
				address: '',
				lotusAddressData: {
					visible: false,
					provinceName: '',
					cityName: '',
					townName: '',
				},
				tree: '',
				treeList: '',
				region: '',
				user_id: '',
				defaultStatus: false,
				shenglist: [],
				shilist: [],
				xianlist: [],
				shengID: '',
				shiID: '',
				xianID: '',
				areaName: '',
			}
		},
		components: {
			"lotus-address": lotusAddress
		},
		methods: {
			cknull() {
				this.areaName = '';
			},
			bindPickerChange: function(e) {

				this.index = e.detail.value;
				this.shilist = this.tree[this.index].children;
				this.shengID = this.tree[this.index].id;
				console.log('picker发送选择改变，携带值为', e.detail.value, this.shengID)
			},
			bindPickerChange2: function(e) {
				this.index2 = e.detail.value;
				this.xianlist = this.shilist[this.index2].children;
				this.shiID = this.shilist[this.index2].id;
				this.xianID = this.xianlist[0].children.id;
				console.log('picker发送选择改变，携带值为', e.detail.value, this.shiID)
			},
			bindPickerChange3: function(e) {
				this.index3 = e.detail.value;
				this.xianID = this.xianlist[this.index3].id;
				console.log('picker发送选择改变，携带值为', e.detail.value, this.xianID)
			},
			adddizhi: function() {
				var data;
				if (this.id == '') {
					if (this.xianID == '') {
						uni.showToast({
							title: '请选择县区',
							icon: 'none',
						})
						return false;
					}
					data = {
						mobile: this.phone,
						name: this.name,
						areaId: this.xianID,
						areaName: this.areaName,
						// province: this.lotusAddressData.provinceName,
						// city: this.lotusAddressData.cityName,
						// area: this.lotusAddressData.townName,
						detailAddress: this.detailAddress,
						defaultStatus: this.defaultStatus,
						// is_default:this.moren
					}
					this.ran.request('/app-api/member/address/create', data, 'POST').then(res => {
						if (res.code == 200) {
							uni.showToast({
								icon: "success",
								title: '添加成功',
								success: function() {}
							})
							setTimeout(function() {
								uni.navigateBack({
									delta: 1
								})
							}, 2000)
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'error',
								duration: 2000
							});
						}
						console.log(res)
					})
				} else {
					data = {
						id: this.id,
						mobile: this.phone,
						name: this.name,
						areaId: this.xianID,
						areaName: this.areaName,
						detailAddress: this.detailAddress,
						defaultStatus: this.defaultStatus,
					}
					this.ran.request('/app-api/member/address/update', data, 'PUT').then(res => {
						if (res.code == 200) {
							uni.showToast({
								icon: "success",
								title: '编辑成功',
								success: function() {}
							})
							setTimeout(function() {
								uni.navigateBack({
									delta: 1
								})
							}, 2000)
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'error',
								duration: 2000
							});
						}
						console.log(res)
					})
				}
			},
			dzxq: function(id) {
				this.ran.request('/app-api/member/address/get?id=' + id, {
					'id': id,
				}, 'GET').then(res => {
					if (res.code == 200) {

						var xqdsata = res.data;
						// for (var i = 0; i < array.length; i++) {
						// 	if (array[i].id == addr_id) {
						// 		xqdsata = array[i]
						// 	}
						// }

						console.log('xqdsata', xqdsata)
						this.name = xqdsata.name;
						this.phone = xqdsata.mobile;
						this.detailAddress = xqdsata.detailAddress;
						this.defaultStatus = xqdsata.defaultStatus;
						this.moren2 = xqdsata.defaultStatus
						this.areaId = xqdsata.areaId;
						this.areaName = xqdsata.areaName;
						// this.lotusAddressData.provinceName = xqdsata.province;
						// this.lotusAddressData.cityName = xqdsata.city;
						// this.lotusAddressData.townName = xqdsata.area;
						// this.region = xqdsata.province + xqdsata.city + xqdsata.area;
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'error',
							duration: 2000
						});
					}

				})
			},
			switch2Change: function(e) {
				if (e.target.value) {
					this.defaultStatus = true;
				} else {
					this.defaultStatus = false;
				}
				console.log(this.moren)
			},
			treeData() {
				var that = this;
				that.ran.request('/app-api/system/area/tree', {}, 'GET').then(res => {
					if (res.code == 200) {
						that.tree = res.data
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'error',
							duration: 2000
						});
					}
					console.log(res)
				})
			}
		},

		onLoad(e) {
			console.log('e', e)
			if (e.id) {
				this.id = e.id;
				this.dzxq(e.id);
			}
			this.treeData();
		}
	}
</script>

<style>
	page {
		background-color: RGBA(246, 246, 246, 1);
	}

	.treeBox {
		width: 500rpx;
		float: left;
		overflow: hidden;
		display: flex;

	}

	.pker {
		flex: 1;
	}

	.box {
		margin: 20rpx auto;
		background-color: #FFFFFF;
		width: 690rpx;
		border-radius: 20rpx;
	}

	.item {
		padding: 25rpx;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #ededed;
	}

	.item input {
		font-size: 30rpx;
	}

	.item-left {
		width: 160rpx;
		font-size: 30rpx;
	}

	.bqitem {
		padding: 5rpx 18rpx;
		background-color: rgba(0, 0, 0, 0.1);
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin-right: 40rpx;
		border-radius: 25rpx;
	}

	.bqitem2 {
		padding: 5rpx 18rpx;
		background-color: rgba(208, 17, 32, 1);
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin-right: 40rpx;
		border-radius: 25rpx;
	}

	.queding {
		height: 80rpx;
		border-radius: 40rpx;
		background-color: #302C29;
		margin: 83rpx auto 0;
		width: 686rpx;
		justify-content: center;
		align-items: center;
		display: flex;
		flex-direction: column;
		color: #FFFFFF;
	}

	.xinghao {
		color: #cd040d;
		margin-right: 20rpx;
	}
</style>